<template>
  <div class="details">
    <t-dialog
      header="商品详情"
      :visible.sync="visible"
      @confirm="onConfirm"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
      top="100px"
      width="1200px"
    >
        <div slot="body">
            <div class="title">
                <span>货品编号：91837</span>
                <span>货品名：绿茶</span>
                <span>货品类别：茶叶</span>
                <span>库存：10箱</span>
                <span>库存预警条件：1箱</span>
            </div>
            <!-- 入库 -->
            <div class="middle">
                <div class="storage-title">
                    <span class="storage-size">
                        入库日志
                    </span>
                    <div class="storage-time">
                        <span>时间：</span>
                        <span>
                            <t-date-picker
                                mode="date"
                                format="YYYY-MM-DD HH:mm:ss"
                                enableTimePicker
                                defaultValue="2021-05-01 11:30:20"
                            />
                        </span>
                    </div>
                </div>
                <div style="margin-top:10px;">
                    <t-table
                        rowKey="index"
                        :data="data"
                        :columns="columns"
                        :table-layout="tableLayout"
                        :table-content-width="tableLayout === 'fixed' ? undefined : '1600px'"
                        :max-height="fixedTopAndBottomRows ? 400 : 250"
                        bordered
                        >
                    </t-table>
                </div>
            </div>
            <!-- 出库 -->
            <div class="middle">
                <div class="storage-title">
                    <span class="storage-size">
                        出库日志
                    </span>
                    <div class="storage-time">
                        <span>时间：</span>
                        <span>
                            <t-date-picker
                                mode="date"
                                format="YYYY-MM-DD HH:mm:ss"
                                enableTimePicker
                                defaultValue="2021-05-01 11:30:20"
                            />
                        </span>
                    </div>
                </div>
                <div style="margin-top:10px;">
                    <t-table
                        rowKey="index"
                        :data="data"
                        :columns="columns"
                        :table-layout="tableLayout"
                        :table-content-width="tableLayout === 'fixed' ? undefined : '1600px'"
                        :max-height="fixedTopAndBottomRows ? 400 : 250"
                        bordered
                        >
                    </t-table>
                </div>
            </div>
        </div>

        
    </t-dialog>
  </div>
</template>

<script>
const data = [];
for (let i = 0; i < 20; i++) {
  data.push({
    index: i,
    platform: i % 2 === 0 ? '共有' : '私有',
    type: ['String', 'Number', 'Array', 'Object'][i % 4],
    default: ['-', '0', '[]', '{}'][i % 4],
    detail: {
      position: `读取 ${i} 个数据的嵌套信息值`,
      position1: `读取 ${i} 个数据的嵌套信息值`,
    },
    description: '数据源',
    needed: i % 4 === 0 ? '是' : '否',
  });
}

export default {
    data() {
        return {
            visible:false, // 弹框开关
            fixedTopAndBottomRows: false,
            tableLayout: 'fixed',
            data,
            columns: [
                {
                    align: 'center',
                    width: 100,
                    colKey: 'index',
                    title: '序号',
                    fixed: 'left',
                    foot: '总述',
                },
                {
                    colKey: 'platform',
                    title: '平台',
                    width: 120,
                    foot: '公有(5)',
                },
                {
                    colKey: 'type',
                    title: '类型',
                    width: 120,
                    foot: 'Number(5)',
                },
                {
                    colKey: 'default',
                    title: '默认值',
                    width: 150,
                    foot: '-',
                },
                {
                    colKey: 'detail.position',
                    title: '详情信息',
                    width: 250,
                    foot: '-',
                },
                {
                    colKey: 'description',
                    title: '说明',
                    width: 120,
                    foot: '数据(10)',
                },
                {
                colKey: 'operation',
                title: '操作人',
                width: 100,
                cell: 'operation',
                fixed: 'right',
                },
            ],
        }
    },
    methods: {
        onConfirm(context) {
            console.log('@confirm与onConfirm任选一种方式即可，其他几个事件类似', context);
            this.visible = false;
        },
        onConfirmAnother(context) {
            console.log('点击了确认按钮', context);
        },
        close(context) {
            console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
        },
        onCancel(context) {
            console.log('点击了取消按钮', context);
        },
        onKeydownEsc(context) {
            console.log('按下了ESC', context);
        },
        onClickCloseBtn(context) {
            console.log('点击了关闭按钮', context);
        },
        onClickOverlay(context) {
            console.log('点击了蒙层', context);
        },

        // 列表
        rehandleClickOp({ text, row }) {
            console.log(text, row);
        },
    }
}
</script>

<style lang="less" scoped>
.details {
    .title {
        font-weight: 500;
        span {
            font-size: 16px;
            // display: block;
            margin-right: 20px;
            border: 2px solid #0048cd;
            border-radius: 4px;
            color: #0048cd;
            padding: 4px;
            margin-top: 4px;
        }
    }
    .middle {
        margin-top: 20px;
        padding: 6px;
        border: 1px solid #999;
        border-radius: 6px;
        .storage-title {
            display: flex;
            align-items: center;
            .storage-size {
                font-weight: 500;
                font-style: 16px;
                font-weight: 600;
                color: #0048cd;
                flex: 1;
            }
            .storage-time {
                display: flex;
                align-items: center;
                font-weight: 500;
                color: #0048cd;
                font-style: 16px;
            }
        }
    }
}
</style>